import { Button, Modal, Form, Input } from 'antd';
import React, { useState } from 'react';
import { modifySet } from '../store/reducer/customerServiceList';
import { useDispatch } from 'react-redux'


const Csledit = (props) => {
    // console.log(props.data);
    const [form] = Form.useForm();
    const dis = useDispatch();

    // 弹出对话框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
        form.setFieldsValue(props.data)

    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);

    };

    // 表单
    const onFinish = (values) => {
        console.log('Success:', values);
        setIsModalOpen(false)
        dis(modifySet(values));

    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
        setIsModalOpen(false);

    };


    return (
        <>
            <Button onClick={showModal} style={{
                background: "#acd",
                border: "none",
                color: "#fff",
            }}>
                编辑编码
            </Button>
            <Modal title="修改编码" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
                <Form
                    form={form}
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="ID"
                        name="key"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="编码"
                        name="id"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="客服名"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="在线状态"
                        name="status"
                    >
                        <Input></Input>
                    </Form.Item>
                    <Form.Item
                        label="时间"
                        name="time"
                        rules={[

                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit" >
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default Csledit
